<!-- 机会 -->
<template>
	<view class="page">
		<!-- 顶部导航栏 -->
		<view class="tabbar" :style="{'height': `${tabbarHeight}px`,'paddingTop': `${tabbarTop}px`}">
			<view class="tabbar-title flex justify-center">
				机会
			</view>
		</view>
		<!-- 中心内容区域 -->
		<view class="content">
			<view class="height">
				<view class="search flex align-center">
					<view class="current flex-shrink">
						当前城市
					</view>
					<view class="city flex justify-between align-center flex-shrink" @click="show = !show">
						<view class="title">
							{{cityTitle}}
						</view>
						<view class="icon flex justify-between align-center"
							:class="show?'tea_arrowDown':'tea_arrowUp'">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/chance/xuanzhuan.png" mode="">
							</image>
						</view>
					</view>
					<view class="search-item">
						<u-search placeholder="请输入人/岗位名称/企业名称" v-model="listQurey.keywords" :show-action="false"
							:disabled="false" @change="find()" @confirm="find()"></u-search>
					</view>
				</view>
				<view class="mask animated faster fadeIn" v-if="show" :style="{'height': `calc(100vh - 50px - ${searchHeight}px - ${tabbarHeight}px  - env(safe-area-inset-bottom))`,
				'position': 'absolute',
				'top': `${searchHeight}px`,
				'left': '0',
				}">
					<Linkage @conceal="conceal" :searchHeight="searchHeight" :tabbarHeight="tabbarHeight"
						@changeshow="chang"></Linkage>
				</view>
				<view class="banner" @click="linkCart">
					<view class="imgs">
						<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/chance/banner.png" mode=""
							lazy-load>
						</image>
					</view>
				</view>
				<view class="position px-3 flex justify-between align-center">
					<view class="title flex justify-center align-center flex-column">
						<view class="text">
							全部职位
						</view>
						<view class="icon">

						</view>
					</view>
					<view class="screening flex justify-between" @click="screening">
						<view class="text">
							筛选
						</view>
						<view class="icon">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/chance/shaixuan.png" mode=""
								lazy-load></image>
						</view>
					</view>
				</view>
				<switch-link name1="附近" name2="最新" :cur="current" @curren="curren"></switch-link>
			</view>
			<view class="recruitment"
				:style="{'height': `calc(100vh - 50px - ${topHeight}px - ${tabbarHeight}px  - env(safe-area-inset-bottom))`}">
				<swiper class="swiper" @change="swiper">
					<swiper-item>
						<scroll-view class="scroll-view" scroll-y="true" @scroll.stop="scroll"
							@scrolltolower="scrollToLower1" lower-threshold='30' @refresherrefresh="onfresh"
							:refresher-triggered="triggered" :refresher-threshold="45" refresher-enabled="refresher">
							<view class="list" v-for="item in leftList" @click.stop="linkDetail(item)">
								<list :companyShow="companyShow" :item="item" @share="canvas"></list>
								<view class="line" style="height: 20rpx;background-color: #f5f5f5;line-height: 0;">
								</view>
							</view>
							<Loading :load1="load1" :load2="2" :load3="2"></Loading>
						</scroll-view>
					</swiper-item>
					<!-- <swiper-item>
						<scroll-view class="scroll-view" scroll-y="true" @scroll="scroll">
							<view class="list" v-for="item in leftList" :key="item.positionListId" @click.stop="linkDetail(item)">
								<list :item="item" ></list>
								<view class="line" style="height: 20rpx;background-color: #f5f5f5;line-height: 0;">

								</view>
							</view>
						</scroll-view>
					</swiper-item> -->
				</swiper>
			</view>
		</view>
		<!-- 底部导航栏 -->
		<u-tabbar v-if="!shaw" :list="tabbar" border-top="true" :before-switch="click" inactive-color="#666666"
			active-color="#333333"></u-tabbar>
		<Screening v-if="shaw" @select="select" :listQurey="listQurey"></Screening>
		<u-mask :show="canvas0" @click="closeCanvas">
		<view  style="width:600rpx;height: 700rpx; position: fixed; left: 50%; top: 50%;  transform: translate(-50%,-50%);">
			<image @click.stop="preview"  :src="path" mode="widthFix" style="width: 600rpx;height: 700rpx;"></image>
			<view v-if="path != ''" @click.stop="save" class="canvas_save flex justify-center align-center">保存到相册</view>
		</view>
		</u-mask>
		<l-painter :board="poster" :isCanvasToTempFilePath="iscanvas" @success="paint" @fail="fail"
			custom-style="position: fixed;left: 200%" />
	</view>
</template>

<script>
	import List from '@/components/list/list.vue' //	list组件
	import Linkage from '@/components/linkage/linkage.vue'
	import SwitchLink from '@/components/switch/switch.vue'
	import {
		getRequest
	} from '../../utils/list.js' //引入get
	import Screening from '@/components/screening/screening.vue'
	import Loading from '@/components/loading/loading.vue'
	var QQMapWX = require('@/utils/qqmap-wx-jssdk.min.js')
	var qqmapsdk
	export default {
		components: {
			List,
			Linkage,
			SwitchLink,
			Screening,
			Loading
		},
		data() {
			return {
				iscanvas:false,
				path:'',
				canvas0:false,
				poster:{},
				load1: 2,
				cityTitle: '全国',
				tabbar: this.$store.state.list, //tabbar数据
				tabbarTop: 0,
				tabbarHeight: 0,
				background: {
					background: 'linear-gradient(135deg, #1C79F8, #0265EB)' //顶部导航背景色
				},
				options: [],
				current: 0,
				searchHeight: 0,
				topHeight: 0,
				show: false,
				shaw: false,
				rightList: [],
				leftList: [],
				companyShow: true,
				scrollHeight: 0,
				triggered: false,
				_freshing: false,
				listQurey: {
					pageNum: 1,
					pageSize: 10,
					type: 0,
					keywords: '',
					positionProvince: '',
					positionCity: '',
					positionArea: '',
					positionEducation: 0,
					positionExperience: 0,
					positionSalaryRange: 0,
					jobId: '',
					companyRange: 0
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			qqmapsdk = new QQMapWX({
				key: 'YMVBZ-6I5CG-FNSQI-IZXFZ-UWWMT-JNBI7' //这里自己的secret秘钥进行填充
			});
			let that = this
			wx.getLocation({
				type: 'wgs84', //返回gps坐标
				success: (res) => { //箭头 下面this
					//获取到经纬度 
					qqmapsdk.reverseGeocoder({
						location: { //对象的方法
							latitude: res.latitude, //赋值解码 
							longitude: res.longitude
						},
						// 成功会的回调
						success: res => {
							console.log(res.result.address_component) //输出
							let city = res.result.address_component.city
							let province = res.result.address_component.province
							let area = res.result.address_component.district
							console.log(city, province, area)
							that.listQurey.positionCity = city
							that.listQurey.positionProvince = province
							that.listQurey.positionArea = area
							that.cityTitle = area
						}
					})
				}
			})
			this.init()


		},
		onShow() {

		},
		methods: {
			//初始化
			init() {
				this._getTabbarHeight()
				this._setTabbarTitleHeight()
				this.scrollHeight = this.searchHeight + this.tabbarHeight
				this._freshing = false
				this.getData()
			},
			canvasInit(){
				this.poster = {css: {
						width: "1500rpx",
						height:"1100rpx",
					},
					views: [ 
						{	//外层
							css:{
								width:"100%",
								height:"100%",
								backgroundColor:"#FFFFFF"
							},
							type:'view',
							views: [
								{	//上
									css:{
										height:'700rpx',
										width:'100%',
									},
									type:'view',
									views: [
										{	//上左
											css:{
												width:"50%",
												paddingLeft:"130rpx",
												paddingTop:"100rpx",
												display:"inline-block",
											},
											type:'view',
											views:[
												{	//上左上
													css:{
														width:"100%"
													},
													type:"view",
													views:[
														{
															css:{
																color:"#333333",
																fontWeight:"Bold",
																fontSize:"96rpx"
															},
															type:"text",
															text:"招聘经理"
														},
														{
															css:{
																display:"block",
																paddingTop:"40rpx",
																color:"#888888",
																fontSize:"48rpx"
															},
															type:"text",
															text:"招聘经理"
														},
													],
												},
												{
													css:{
														display:"block",
														fontSize:"50rpx",
														color:"#777777",
														paddingTop:"80rpx"
													},
													text:'让企业招人不烦，让人才就业不难',
													type:'text'
												},
												{	//上左下
													css:{
														paddingTop:"100rpx",
														width:"560rpx",
														height:"160rpx"
													},
													type:"view",
													views:[
														{
															css:{
																width:"150rpx",
																height:"150rpx"
															},
															type:"image",
															src:""
														},
														{
															css:{
																width:"370rpx",
																color:"#777777",
																fontSize:"40rpx",
																marginLeft:"28rpx",
																marginTop:"18rpx"
															},
															type:"text",
															text:"点击识别小程序码  投递简历、分享机会"
														}
													]
												}
											]
										},
										{	//上右
											css:{
												display:"inline-block",
												width:"40%",
												height:"100%"
											},
											type:'view',
											views:[
												{	//上右上
													css:{
														marginLeft:"208rpx",
														color:"#129019",
														fontSize:"80rpx",
														fontWeight:"bold",
														lineHeight:"70rpx",
														marginTop:"140rpx"
													},
													type:"text",
													text:"15k-25k"
												},
												{	//上右下
													css:{
														marginLeft:"100rpx",
														width:"450rpx",
														height:"450rpx",
														marginTop:"140rpx"
													},
													type:"image",
													src:"https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/chance/finger.png"
												}
											]
										}
									]
								},
								{	//下
								
									css:{
										height:"500rpx",
										width:"100%",
										color:"#888888",
										fontSize:"48rpx",
										textAlign:"center"
									},
									type:'text',
									text:"山富职得,你很值得!"									
								}
							]
						}
					]}
				
				
			},
			canvas(e){
				console.log(e)
				let qrcode = {}
				qrcode.id = e.positionListId
				this.$get('/positionList/getSharePictures',qrcode).then((res)=>{
					if(res.code == 200){
						this.canvasInit()
						this.poster.views[0].views[0].views[0].views[0].views[0].text = e.positionName
						this.poster.views[0].views[0].views[0].views[0].views[1].text = e.companyCity + e.positionArea + '|' + e.positionExperiences + '|' + e.positionEducations
						this.poster.views[0].views[0].views[1].views[0].text = e.positionLower + 'k' + '-' + e.positionUpper + 'k'
						this.poster.views[0].views[0].views[1].views[1].src = res.data
						this.poster.views[0].views[0].views[0].views[2].views[0].src = 'https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/chance/finger.png'
						console.log(res.data)
						this.canvas0 = true
						uni.showLoading({
							
						})
						this.iscanvas = true
					}
				})
			},
			save(){
				uni.getImageInfo({
						src:this.path,
						success: function(image) {
							console.log('图片信息：', JSON.stringify(image));
							uni.saveImageToPhotosAlbum({
								filePath: image.path,
								success: function() {
									console.log('save success');
									uni.showToast({
										title: '图片保存成功,快去分享吧！',
										icon: 'none',
										duration: 2200
									});
									
								}
							});
						}
					})
			},
			preview(){
				uni.previewImage({
				  current: this.path, // 当前显示图片的http链接
				  urls: [this.path] // 需要预览的图片http链接列表
				})
			},
			//获取数据
			async getData() {
				let {
					data: list,
					code
				} = await this.$get('/positionList/page', this.listQurey)
				console.log(this.listQurey)
				if (code == 200) {
					if (this.listQurey.pageNum == 1) {
						if (list.records.length != 10) {
							this.load1 = 1
						} else {
							this.load1 = 0
						}
					} else {
						if (list.records.length != 0) {
							this.load1 = 0
						} else {
							this.load1 = 1
						}
					}

					this.leftList = this.leftList.concat(list.records)
				}
			},
			onfresh() {
				if (this._freshing) {
					return
				}
				this._freshing = true
				this.triggered = true
				this.load1 = 2
				this.leftList = []
				this.listQurey.pageNum = 1
				this.getData()
				setTimeout(() => {
					this.triggered = false
					this._freshing = false
				}, 1000)
			},
			chang(e) {
				this.show = e

			},
			paint(e){
				console.log(e)
				uni.hideLoading()
				this.path = e
			},
			closeCanvas(){
				this.canvas0 = false
				this.iscanvas = false
				this.path = ''
				this.poster = {}
			},
			//上拉加载
			scrollToLower1() {
				if (this.load1 != 1) {
					this.listQurey.pageNum += 1
					this.getData()
				}
			},
			select(e) {
				this.shaw = e.shaw
				this.listQurey.positionEducation = e.positionEducation
				this.listQurey.companyRange = e.companyRange
				this.listQurey.jobId = e.jobId
				this.listQurey.positionExperience = e.positionExperience
				this.listQurey.positionSalaryRange = e.positionSalaryRange
				this.listQurey.pageNum = 1
				this.leftList = []
				this.getData()

			},
			//设置title高度
			_setTabbarTitleHeight() {
				let top = uni.getStorageSync('tabbarCapsule')
				this.tabbarTop = top.top
				this.tabbarHeight = top.bottom + 10
			},
			//tabbar切换前的回调
			click(e) {
				return true
			},
			//筛选
			screening() {
				this.shaw = true
			},
			//切换附近与最新
			curren(id) {
				this.listQurey.type = id
				this.current = id
				this.leftList = []
				this.listQurey.pageNum = 1
				this.getData()
			},
			//选择城市
			conceal(e) {
				console.log(e)
				if (e.chooseprovince) {
					this.listQurey.positionProvince = e.chooseprovince
					if (e.choosecity) {
						this.listQurey.positionCity = e.choosecity
						if (e.choosearea) {
							this.listQurey.positionArea = e.choosearea
							this.cityTitle = this.listQurey.positionArea
						} else {
							this.cityTitle = this.listQurey.positionCity
							this.listQurey.positionArea = e.choosearea
						}
					} else {
						this.cityTitle = this.listQurey.positionProvince
						this.listQurey.positionCity = e.choosecity
						this.listQurey.positionArea = e.choosearea
					}
				} else {
					this.cityTitle = '全国'
					this.listQurey.positionProvince = e.chooseprovince
					this.listQurey.positionCity = e.choosecity
					this.listQurey.positionArea = e.choosearea
				}
				console.log(this.listQurey)
				this.listQurey.pageNum = 1
				this.leftList = []
				this.getData()
			},
			//获取搜索与广告图区域高度,
			_getTabbarHeight() {
				uni.createSelectorQuery().select('.height').boundingClientRect(item => {
					this.topHeight = item.height
				}).exec()
				uni.createSelectorQuery().select('.search').boundingClientRect(item => {
					this.searchHeight = item.height
				}).exec()
			},
			//滑动事件
			swiper(e) {
				this.current = e.detail.current
			},
			//职位列表点击进入详情页
			linkDetail(item) {
				uni.setStorageSync('pageNum', item.positionListId)
				uni.navigateTo({
					url: '/pagesB/positionDetail/positionDetail'
				})

			},
			//滚动事件
			scroll() {

			},
			find() {
				this.listQurey.pageNum = 1
				this.leftList = []
				this.getData()
			},
			//点击前往大厂直聘
			linkCart() {
				uni.navigateTo({
					url: '/pagesB/pushCart/pushCart'
				})
			}
		}
	}
</script>

<style lang="scss">
	.page {
		min-height: 100vh;
		//padding-bottom: env(safe-area-inset-bottom);
		position: relative;

		.tabbar {
			background: linear-gradient(135deg, #1C79F8, #0265EB); //顶部导航背景色
			//position: relative;

			.tabbar-title {
				font-size: 40rpx;
				color: #FFFFFF;
				font-weight: 600;
			}
		}

		.content {
			.height {
				position: relative;

				.search {
					width: 100%;
					padding: 20rpx 30rpx;
					height: 100rpx;

					.current {
						font-size: 24rpx;
						color: #666666;
					}

					.city {
						margin-left: 20rpx;

						.title {
							font-size: 32rpx;
							color: #333333;
							font-weight: bold;
							margin-right: 20rpx;
						}

						.icon {
							width: 15rpx;
							height: 12rpx;

						}

						@keyframes tea_arrow {
							0% {
								transform: rotateZ(180deg);
							}

							25% {
								transform: rotateZ(135deg);
							}

							50% {
								transform: rotateZ(90deg);
							}

							75% {
								transform: rotateZ(45deg);
							}

							100% {
								transform: rotateZ(0deg);
							}
						}

						@keyframes tea_arrow1 {
							0% {
								transform: rotateZ(0deg);
							}

							25% {
								transform: rotateZ(45deg);
							}

							50% {
								transform: rotateZ(90deg);
							}

							75% {
								transform: rotateZ(135deg);
							}

							100% {
								transform: rotateZ(180deg);
							}

						}

						.tea_arrowDown {
							animation: tea_arrow 0.5s linear;
							transform-origin: center center;
							transform: rotateZ(0deg);
						}

						.tea_arrowUp {
							animation: tea_arrow1 0.5s linear;
							transform-origin: center center;
							transform: rotateZ(180deg);
						}
					}

					.search-item {
						margin-left: 20rpx;
						width: 100%;
					}
				}

				.mask {
					background: #FFFFFF;

					.list-cell {
						display: flex;
						box-sizing: border-box;
						width: 100%;
						padding: 10px 24rpx;
						overflow: hidden;
						color: #323233;
						font-size: 14px;
						line-height: 24px;
						background-color: #fff;
					}
				}

				.banner {
					padding: 0 30rpx 30rpx 16rpx;

					.imgs {
						width: 704rpx;
						height: 157rpx;
					}
				}

				.position {
					.title {
						.text {
							font-weight: bold;
							color: #333333;
							font-size: 36rpx;
						}

						.icon {
							width: 40rpx;
							height: 5rpx;
							background: #0265EB;
							border-radius: 3px;
						}
					}

					.screening {
						width: 100rpx;
						height: 46rpx;
						background: #F6F6F6;
						border-radius: 8rpx;
						padding: 0 10rpx;

						.text {
							font-weight: 400;
							color: #666666;
							font-size: 28rpx;
							display: inline-block;
						}

						.icon {
							height: 100%;
							display: inline-block;

							image {
								width: 10rpx;
								height: 10rpx;
								border: 1rpx solid #000000;
								vertical-align: bottom;
							}
						}
					}
				}
			}

			.recruitment {

				.swiper {
					height: 100%;

					.scroll-view {
						height: 100%;

						.list {}
					}
				}
			}
		}
		.canvas_save{
			width: 600rpx;
			height: 75rpx;
			background: #0265EB;
			border-radius: 38rpx;
			line-height: 75rpx;
			font-weight: 500;
			color: #FFFFFF;
			font-size: 32rpx;
			box-shadow: 0rpx 10rpx 10rpx rgba(12,108,240, .4);
		}
	}
</style>
